/* FOOTER */
.footer {
  background-image: url('/sites/experience/Style Library/Experience/assets/footer-bg.jpg');
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
}

.footer .footer-wrapper {
  display: flex;
  flex-direction: column;
  gap: 10rem;
  padding: 20rem 0 10rem;
}

.footer .footer-wrapper > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer .footer-wrapper .footer-logos .exp-img {
  width: 100%;
  max-width: 20rem;
}

.footer .footer-wrapper .footer-logos .univali-img {
  width: 100%;
  max-width: 12.8rem;
  margin-right: 15rem;
}

.footer .footer-wrapper .footer-logos button {
  width: 6rem;
  height: 6rem;
  background-color: var(--azul);
}

.footer .footer-wrapper .footer-logos button:hover {
  background-color: var(--azul) !important;
}

.footer .footer-wrapper .footer-links {
  gap: 10rem;
}

.footer .footer-wrapper .footer-links nav {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer .footer-wrapper .footer-links nav a {
  font-size: 1.4rem;
  line-height: 2rem;
  color: var(--textos);
  text-transform: uppercase;
}

.footer .footer-wrapper .footer-links > div {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

@media (max-width: 1280px) {
  .footer .footer-wrapper {
    padding: 20rem 3rem 10rem;
  }
}

@media (max-width: 768px) {
  .footer .footer-wrapper {
    gap: 4.5rem;
  }

  .footer .footer-wrapper .footer-logos .exp-img {
    max-width: 14rem;
  }

  .footer .footer-wrapper .footer-logos .univali-img {
    display: none;
  }

  .footer .footer-wrapper .footer-logos button {
    max-width: 4rem;
    max-height: 4rem;
  }

  .footer .footer-wrapper .footer-logos button > img {
    width: 100%;
    max-width: 2.5rem;
  }

  .footer .footer-wrapper .footer-links {
    flex-direction: column;
    gap: 4.5rem;
  }

  .footer .footer-wrapper .footer-links nav {
    flex-direction: column;
    gap: 4.5rem;
  }
}
